<template>
  <div id="mapqq" style="width: 100%; height: 600px; margin-top: 10px"></div>
</template>

<script>
// import marker from '@/assets/marker.png'

export default {
  name: 'Mapqq',
  props: {
    geometries: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.loadScript()
  },
  beforeDestroy() {
    this.map.destroy()
  },
  methods: {
    loadScript() {
      if (window.TMap) {
        this.init()
        return false
      }
      window.qqmapInit = this.init
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=3MVBZ-BA3WS-HO2OL-6TYH3-MMIBO-GHF6R&callback=qqmapInit'
      document.body.appendChild(script)
    },
    init() {
      // 初始化地图
      this.map = new TMap.Map('mapqq', {
        center: new TMap.LatLng(33.358062, 110.830078), // 设置中心点坐标
        zoom: 5, // 设置地图缩放级别
        viewMode: '2D'
      })
      // 创建并初始化MultiMarker
      const markerLayer = new TMap.MultiMarker({
        // 指定地图容器
        map: this.map,
        // 样式定义
        styles: {
          // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          myStyle: new TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 35, // 点标记样式高度（像素）
            // 'src': marker, // 图片路径
            // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            anchor: { x: 16, y: 32 }
          })
        },
        // 点标记数据数组
        geometries: this.geometries.map((item) => {
          return {
            id: item.id, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: 'myStyle', // 指定样式id
            position: new TMap.LatLng(item.latitude, item.longitude), // 点标记坐标位置
            properties: {
              // 自定义属性
              tenantName: item.tenantName
            }
          }
        })
      })
      // 初始化infoWindow
      const infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: new TMap.LatLng(39.984104, 116.307503),
        offset: { x: 0, y: -32 } // 设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      })
      infoWindow.close() // 初始关闭信息窗关闭
      // 监听marker点击事件
      markerLayer.on('click', (evt) => {
        // 设置infoWindow
        infoWindow.open() // 打开信息窗
        infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
        infoWindow.setContent(`
          <div class="mapqq-markerLayer-infoWindow">
            <div class="title">${evt.geometry.properties.tenantName}</div>
            <div>标段数量：<span>5</span></div>
            <div>工点数量：<span>15</span></div>
            <div>洞内总人数数量：<span>25</span></div>
          </div>
        `) // 设置信息窗内容
      })
    }
  }
}
</script>
<style lang="scss">
  .mapqq-markerLayer-infoWindow {
    width: 200px;
    text-align: left;

    div {
      margin: 10px 5px;
      font-size: 14px;

      &.title {
        font-size: 16px;
      }

      span {
        float: right;
        padding-right: 20px;
      }
    }
  }
</style>
